<!DOCTYPE html>
	<html lang="zh" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
	<head>
		<th:block th:include="include :: header('新增bff接口')" />
		<link th:href="@{/css/common.css}" rel="stylesheet"/>
		<link th:href="@{/css/edit.css}" rel="stylesheet"/>
		<link th:href="@{/js/plugins/dragula/dragula.css}" rel="stylesheet"/>
		<script th:src="@{/js/plugins/dragula/dragula.js}"></script>

		<th:block th:include="include :: select2-css" />
		<th:block th:include="include :: bootstrap-select-css" />
		<style type="text/css">
			.red {
				color: red !important;
			}

			body .layer-ext-moon .layui-layer-btn .selfBtn {
				background: #f60 !important;
				color: #fff !important;
				border: 1px solid #f60 !important;
				border-radius: 3px !important;
				float: right;
			}
		</style>
	</head>
	<body class="gray-bg">
		<div class="wrapper wrapper-content ">
			<div class="col-md-12">
				<div class="header buff-header">
					<h4 class="fz16" th:text="${interfaceInfo.interfaceName}">创建版本</h4><span class="fz12">BFF</span>
				</div>
				<div class="row">
					<div class="col-md-6 left">
						<ul class="nav nav-tabs first-navtabs" role="tablist">
							<li class="active"><a href="#left-one" role="tab" data-toggle="tab">接口设计</a></li>
							<li><a href="#left-two" role="tab" data-toggle="tab">编辑接口</a></li>
							<li><a href="#left-three" role="tab" data-toggle="tab" onclick="virtualUsage()">虚拟用况</a></li>
							<li id="fourLi"><a href="#left-four" role="tab" data-toggle="tab" onclick="virtualUsageGroup()">虚拟用况组</a></li>
						</ul>
						<div class="tab-content">
							<div class="content tab-pane active" role="tabpanel" id="left-one">
								<ul class="nav nav-tabs" role="tablist">
									<li class="active"><a href="#params-in" role="tab" data-toggle="tab" onclick="clickTab(1)">入参</a></li>
									<li><a href="#params-out" role="tab" data-toggle="tab" onclick="clickTab(2)">出参</a></li>
									<span class="pull-right">
										<a class="btn btn-primary btn-rounded btn-sm addFieldBtn" style="background-color:#0088ff;line-height: 1;">添加字段</a>
										<a class="btn btn-primary btn-rounded btn-sm addDataMapBtn" style="margin-left:10px;background-color:#0088ff;line-height: 1;">添加数据集</a>
										<a class="btn btn-primary btn-rounded btn-sm deleteBtn" style="margin-left:10px;background-color:#0088ff;line-height: 1;">批量删除</a>
									</span>
								</ul>
								<div class="tab-content paramSelect">
									<div role="tabpanel" class="tab-pane active paramList" id="params-in">
									</div>
									<div role="tabpanel" class="tab-pane paramList" id="params-out">
									</div>
								</div>
							</div>
							<div role="tabpanel" class="tab-pane" id="left-two">
								<div class="ibox-content">
									<form class="form-horizontal m-t" id="bffForm" th:object="${interfaceInfo}">
										<input id="id" name="id" th:field="*{id}" type="hidden"/>
										<div class="form-group">
											<div class="col-sm-12 pull-right">
												<input id="interfaceName" name="interfaceName" th:field="*{interfaceName}" type="text" class="form-control" placeholder="输入接口名称">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3">前后类型</label>
											<div class="col-sm-3 pull-right">
												<select class="form-control noselect2" id="fbType" name="fbType">
													<option value="2">BFF</option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">归属服务：</label>
											<div class="col-sm-4 pull-right">
												<select name="appType" id="appType" class="form-control m-b noselect2" th:with="type=${@dict.getType('appType')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{appType}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">动词：</label>
											<div class="col-sm-4 pull-right">
												<select name="operateType" id="operateType" class="form-control m-b" th:with="type=${@dict.getType('operateType')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{operateType}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label is-required">归属域：</label>
											<div class="col-sm-4 pull-right">
												<select name="domainId" id="domainId" class="form-control m-b" required>
													<option th:each="dict : ${domainInfoList}" th:text="${dict.domainName}" th:value="${dict.id}" th:field="*{domainId}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label is-required">归属域对象：</label>
											<div class="col-sm-4 pull-right">
												<select name="domainObjectId" id="domainObjectId" class="form-control m-b" required>
													<option th:each="dict : ${domainObjectList}" th:text="${dict.objectName}" th:value="${dict.id}" th:field="*{domainObjectId}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">是否风险接口：</label>
											<div class="col-sm-2 pull-right">
												<select name="isRisk" class="form-control noselect2" th:with="type=${@dict.getType('sys_yes_no')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{isRisk}"></option>
												</select>
											</div>
										</div>

										<div class="form-group">
											<label class="col-sm-3">接口类型</label>
											<div class="col-sm-3 pull-right">
												<select class="form-control noselect2" name="optType" id="optType" th:with="type=${@dict.getType('optType')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{optType}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3">特殊接口：</label>
											<div class="col-sm-3 pull-right">
												<select name="specialInterface" id="specialInterface" class="form-control m-b noselect2" th:with="type=${@dict.getType('specialInterface')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{specialInterface}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">入参DTO名称：</label>
											<div class="pull-right">
												<input  name="inParamDtoName" id="inParamDtoName" th:field="*{inParamDtoName}" type="text" class="form-control" placeholder="输入入参DTO名称" required>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">出参DTO名称：</label>
											<div class="pull-right">
												<input  name="outParamDtoName" id="outParamDtoName" th:field="*{outParamDtoName}" type="text" class="form-control" placeholder="输入出参DTO名称" required>
											</div>
										</div>
										<div class="form-group">
											<label>
												<select class="form-control noselect2" name="interfaceType" id="interfaceType" th:with="type=${@dict.getType('interfaceType')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{interfaceType}"></option>
												</select>
											</label>
											<div class="pull-left" style="left: 100px;position: relative;top: 10px;"><img  th:src="@{/img/line.png}"/></div>
											<div class="pull-right" style="width: calc(100% - 114px);">
<!--												<span style="line-height: 2.2;">/</span>-->
												<input id="interfaceUrl" name="interfaceUrl" type="url" class="form-control"
												 placeholder="输入地址" th:field="*{interfaceUrl}" style="float: right;width: calc(100% - 10px);">
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-12">
												<textarea id="interfaceDescription" name="interfaceDescription" class="form-control" placeholder="输入描述信息" style="height: 96px;">[[*{interfaceDescription}]]</textarea>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-4 control-label">是否返回树形结构</label>
											<div class="col-sm-2 pull-right">
												<select name="isTree" id="isTree" class="form-control noselect2" th:with="type=${@dict.getType('sys_yes_no')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{isTree}"></option>
												</select>
											</div>
										</div>
<!--										<div class="form-group">-->
<!--											<label class="col-sm-3 control-label">所有内容条数</label>-->
<!--											<div class="pull-right">-->
<!--												<input name="total" th:field="*{total}" type="text" class="form-control" style="width: 90px;float: left;width: auto;"-->
<!--												 placeholder="输入数量">-->
<!--												<span style="line-height: 2.6;">条</span>-->
<!--											</div>-->
<!--										</div>-->
										<div class="form-group">
											<label class="col-sm-3 control-label">页数</label>
											<div class="pull-right">
												<input name="page" th:field="*{page}" type="text" class="form-control noselect2" style="width: 90px;float: left;width: auto;"
													   placeholder="输入页数">
												<span style="line-height: 2.6;">条</span>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">每页大小</label>
											<div class="pull-right">
												<input name="pageSize" th:field="*{pageSize}" type="text" class="form-control" style="width: 90px;float: left;width: auto;"
													   placeholder="输入每页大小">
												<span style="line-height: 2.6;">条</span>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">参数是否分页</label>
											<div class="col-sm-2 pull-right">
												<select name="isPage" class="form-control noselect2" th:with="type=${@dict.getType('sys_yes_no')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{isPage}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">是否边界</label>
											<div class="col-sm-2 pull-right">
												<select name="isBoundary" id="isBoundary" class="form-control noselect2" th:with="type=${@dict.getType('sys_yes_no')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{isBoundary}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">是否公共</label>
											<div class="col-sm-2 pull-right">
												<select name="isCommon" id="isCommon" class="form-control noselect2" th:with="type=${@dict.getType('sys_yes_no')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{isCommon}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">是否平台</label>
											<div class="col-sm-2 pull-right">
												<select name="isPlatform" id="isPlatform" class="form-control noselect2" th:with="type=${@dict.getType('sys_yes_no')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{isPlatform}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">是否管理</label>
											<div class="col-sm-2 pull-right">
												<select name="isManage" id="isManage" class="form-control noselect2" th:with="type=${@dict.getType('sys_yes_no')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{isManage}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">是否分支</label>
											<div class="col-sm-2 pull-right">
												<select name="isBranch" id="isBranch" class="form-control noselect2" th:with="type=${@dict.getType('sys_yes_no')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{isBranch}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">页面存储类型</label>
											<div class="col-sm-2 pull-right">
												<select name="storageType" id="storageType" class="form-control noselect2" th:with="type=${@dict.getType('storageType')}">
													<option value="0">请选择</option>
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{storageType}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">选择页面</label>
											<div class="col-sm-8 pull-right">
												<select name="pageIds" id="pageIds" class="form-control noselect2 selectpicker" style="width:300px !important;" multiple data-live-search="true" title="请选择">
													<option th:each="info : ${pageList}" th:text="${info.pageName}" th:value="${info.id}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">选择用况</label>
											<div class="col-sm-8 pull-right">
												<select name="usageId" id="usageId" class="form-control" style="width:300px !important;">
													<option value="0">请选择</option>
													<option th:each="usage : ${usageList}" th:text="${usage.usageyName}" th:value="${usage.id}" th:field="*{usageId}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">产品版本</label>
											<div class="col-sm-8 pull-right">
												<select name="productIds" id="productIds" class="form-control noselect2 selectpicker" style="width:300px !important;" multiple data-live-search="true" title="请选择">
													<option th:each="info : ${productList}" th:text="${info.productName}" th:value="${info.id}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">设计状态：</label>
											<div class="col-sm-8 pull-right">
												<select name="preLifeCycle" id="preLifeCycle" class="form-control m-b noselect2" th:with="type=${@dict.getType('preLifeCycle')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{preLifeCycle}"></option>
												</select>
											</div>
										</div>
										<div class="form-group" shiro:hasPermission="interface:interface:lifeCycle">
											<label class="col-sm-3 control-label">生命周期：</label>
											<div class="col-sm-8 pull-right">
												<select name="lifeCycle" id="lifeCycle" class="form-control m-b noselect2" th:with="type=${@dict.getType('lifeCycle')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{lifeCycle}"></option>
												</select>
											</div>
										</div>
										<div class="form-group" id="isEditTestDiv">
											<label class="col-sm-3 control-label">是否编辑测试：</label>
											<div class="col-sm-8 pull-right">
												<select name="isEditTest" id="isEditTest" class="form-control m-b noselect2" th:with="type=${@dict.getType('sys_yes_no')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{isEditTest}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">异常状态：</label>
											<div class="col-sm-8 pull-right">
												<select name="errorStatus" id="errorStatus" class="form-control m-b noselect2" th:with="type=${@dict.getType('errorStatus')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{errorStatus}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">是否定时任务：</label>
											<div class="col-sm-8 pull-right">
												<select name="isJob" id="isJob" class="form-control m-b noselect2" th:with="type=${@dict.getType('sys_yes_no')}">
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{isJob}"></option>
												</select>
											</div>
										</div>
										<div class="form-group" id="jobDescriptionDiv">
											<label class="col-sm-3 control-label">定时任务描述：</label>
											<div class="col-sm-8">
												<textarea name="jobDescription" class="form-control">[[*{jobDescription}]]</textarea>
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-12">
												<textarea id="nonFunctionalRequirements" name="nonFunctionalRequirements" class="form-control" placeholder="输入非功能性需求描述" style="height: 96px;">[[*{nonFunctionalRequirements}]]</textarea>
											</div>
										</div>
										<div class="form-group" style="text-align: center;">
											<button onclick="submitHandler()" class="btn btn-primary btn-rounded btn-sm" style="height: 32px;line-height: 1;width: 132px;background: #0088FF;margin-top: 32px;" type="button">保存</button>
										</div>
									</form>
								</div>
							</div>
							<div role="tabpanel" class="tab-pane" id="left-three"></div>
							<div role="tabpanel" class="tab-pane" id="left-four"></div>
						</div>
					</div>
					<div class="col-md-6 right">
						<ul class="nav nav-tabs first-navtabs contentTab" role="tablist">
							<li class="active"><a href="#content-preview" role="tab" data-action = "" data-toggle="tab">预览</a></li>
							<li><a href="#content-table" role="tab" data-toggle="tab" data-action = "relationTableList">表模型</a></li>
							<li><a href="#content-usage" role="tab" data-toggle="tab" data-action = "relationUsageList">用况</a></li>
							<li><a href="#content-page" role="tab" data-toggle="tab" data-action = "relationPageList">页面</a></li>
							<li><a href="#content-log" role="tab" data-toggle="tab" data-action = "relationTestLog">单元测试日志</a></li>
						</ul>
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active mt20 " id="content-preview">
								<div class="ibox-content content-preview">
									<div class="panel-body">
										<div class="panel-group" id="accordion">
											<div class="panel panel-default">
												<div class="panel-heading" data-toggle="collapse" href="#collapse0">
													<div class="panel-title">
														<div class="pull-left" style="margin-right: 20px;">
															<span class="label type-flag" th:text="${interfaceInfo.interfaceType=='1'?'GET': (interfaceInfo.interfaceType=='2' ? 'POST' : (interfaceInfo.interfaceType=='3' ? 'PUT' : 'DELETE'))}">增</span>
															[[${interfaceInfo.interfaceName}]]
														</div>
														<div class="pull-left" th:text="${interfaceInfo.interfaceUrl}">/createVersion</div>
													</div>
												</div>
												<div id="collapse0" class="panel-collapse collapse in">
													<dl class="dl-horizontal">
														<dt>非功能性需求</dt>
														<dd id="nonFunctionalRequirementsDd"></dd>
													</dl>
													<dl class="dl-horizontal">
														<dt>接口描述</dt>
														<dd id="interfaceDescriptionDd"></dd>
													</dl>
													<div class="panel-tit">参数</div>
												</div>
											</div>
											<div class="panel-tit" id="virtualUsage">虚拟用况</div>
										</div>
									</div>
								</div>
							</div>
							<div role="tabpanel" class="tab-pane content-table mt20" id="content-table"></div>
							<div role="tabpanel" class="tab-pane content-usage mt20" id="content-usage"></div>
							<div role="tabpanel" class="tab-pane mt20 content-page" id="content-page"></div>
							<div role="tabpanel" class="tab-pane mt20 content-log" id="content-log">
								<div id="content-time"></div>
								<div id="content"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<th:block th:include="include :: footer" />
		<th:block th:include="include :: select2-js" />
		<th:block th:include="include :: bootstrap-select-js" />
		<script th:inline="javascript">
			var prefix = ctx + "interface/interface";
			var appType=$("#appType").val();
			var domainInfoList = [[${domainInfoList}]];
			var domainObjectList = [[${domainObjectList}]];
			var isBranch = $("#isBranch").val();
			//$("#appType").val('oms');
			$("#interfaceType").val('2');
			if (isBranch == 'Y') {
				$('#fourLi').show();
			} else {
				$('#fourLi').hide();
			}
			$("#optType").change(function() {
				var value = $(this).val();
				if (value == 1) {
					$("#interfaceType").val(2);
				} else if (value == 2) {
					$("#interfaceType").val(4);
				} else if (value == 3) {
					$("#interfaceType").val(3);
				} else if (value == 4) {
					$("#interfaceType").val(1);
				}
			});

			// if($("#lifeCycle").val() == 30) {
			// 	$("#isEditTestDiv").show();
			// }
			//
			// $("#lifeCycle").change(function () {
			// 	if ($(this).val() == 30) {
			// 		$("#isEditTestDiv").show();
			// 	} else {
			// 		$("#isEditTestDiv").hide();
			// 		$("#isEditTest").val("N");
			// 	}
			// });
			$("body").on('click', ".paramList .icon-jian", function(e) {
				//删除对应数据
				var removeNode1 = $(this).parents(".list-item").parent(".more");
				var removeNode2 = $(this).parents(".list-item");
				var parentNode = $(this).parent();
				var type = parentNode.attr('data-type');
				var id = parentNode.attr('data-id');
				var url = prefix + "/removeField/" + id;
				if (type == 2) {
					url = prefix + "/removeParamsField/" + id;
				}
				var config = {
					url: url,
					type: "get",
					dataType: "json",
					data: null,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						if (result.code == web_status.SUCCESS) {
							removeNode1.remove();
							removeNode2.remove();
							loadInterfaceParams();
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						} else {
							$.modal.alertError(result.msg);
						}
					}
				};
				$.ajax(config);
			}).on('click', ".listInterface .icon-jian", function(e) {
				//删除对应数据
				var removeNode1 = $(this).parents(".list-item").parent(".more");
				var removeNode2 = $(this).parents(".list-item");
				var parentNode = $(this).parent();
				var id = parentNode.attr('data-id');
				var url = prefix + "/removeVirtualUsage/" + id;
				var config = {
					url: url,
					type: "get",
					dataType: "json",
					data: null,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						if (result.code == web_status.SUCCESS) {
							removeNode1.remove();
							removeNode2.remove();
							virtualUsage();
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						} else {
							$.modal.alertError(result.msg);
						}
					}
				};
				$.ajax(config);
			}).on("click",".addDubboBtn",function(){
                var btn = ['确定', '取消','<span style = "color:#000000">已选择<span id="virtualUsageSelected">0</span>项</span>'];
                var options = {
                    title: '选择Dubbo接口',
                    height: "600",
                    url: prefix + "/bff_dubbo_choose/" + $("#id").val(),
                    btn: btn,
                    callBack: function (index, layero) {
                        var iframeWin = layero.find('iframe')[0];
                        iframeWin.contentWindow.submitHandler(index, layero);
                        virtualUsage();
                        return false;
                    }
                };
                $.modal.openOptions(options);
            }).on("click",".addMethodBtn",function(){
				var btn = ['确定', '取消','<span style = "color:#000000">已选择<span id="virtualUsageSelected">0</span>项</span>'];
				var options = {
					title: '选择方法',
					height: "600",
					url: prefix + "/method_choose/" + $("#id").val() + "/" + appType,
					btn: btn,
					callBack: function (index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.submitHandler(index, layero);
						virtualUsage();
						return false;
					}
				};
				$.modal.openOptions(options);
			}).on('click', ".table-detail", function () {
				var tableId = $(this).attr("tableId");
				$.operate.addTab2("表详情", prefix + "/table_detail/" + tableId);
			}).on('click', ".usage-detail", function () {
				var usageId = $(this).attr("usageId");
				$.operate.addTab2("用况详情", ctx + "usage/usage/detail/" + usageId);
			}).on('click', ".uploadImg", function () {
				var title = "上传图片";
				var interfaceId = $("input[name='id']").val();
				var url = prefix + "/add_bff_img/" + interfaceId;
				var width = 800;
				var height = $(window).height() - 50;
				$.modal.open(title, url, width, height);
			}).on('click','.virtualUsage .panel-heading',function(){
				var idName = $(this).attr("href");
				$(idName).html().length ==0 && paramList(idName, $(this).data("id"), 3);
			}).on('click', ".partPage", function(e) {
                var url = $(this).attr("src");
                var json = {
                    "title": "预览",
                    "start": 0,
                    "data": [{
                        "src": url,
                    }]
                };
                layer.photos({
                    photos: json,
                    closeBtn: 0, //右上角按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
                    anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });
            }).on('change', ".nodeType", function (e) {
				var id = $(this).find("option:selected").attr("data");
				var value = $(this).val();
				var config = {
					url: prefix + "/updateFieldNodeType",
					type: "post",
					dataType: "json",
					data: "id="+id +"&nodeType=" + value,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						if (result.code == web_status.SUCCESS) {
							loadInterfaceParams();
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						} else {
							$.modal.alertError(result.msg);
						}
					}
				};
				$.ajax(config);
			}).on('click', '.deleteImg', function () {
				var id = $(this).attr('data');
				var url = ctx + "page/page/deleteImg?id=" + id;
				var config = {
					url: url,
					type: "post",
					dataType: "json",
					data: null,
					success: function(result) {
						relationPageList();
					}
				};
				$.ajax(config);
			}).on('change', '.isRequiredSelect', function () {
				var id = $(this).find("option:selected").attr("data");
				var type = $(this).find("option:selected").attr("data-type");
				var value = $(this).val();
				var config = {
					url: prefix + "/updateIsRequired",
					type: "post",
					dataType: "json",
					data: "id="+id +"&type=" + type + "&isRequired=" + value,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						// if (result.code == web_status.SUCCESS) {
						// 	loadInterfaceParams();
						// } else if (result.code == web_status.WARNING) {
						// 	$.modal.alertWarning(result.msg)
						// } else {
						// 	$.modal.alertError(result.msg);
						// }
					}
				};
				$.ajax(config);
			}).on('click', '.pageImgName', function () {
				var id = $(this).attr("data-id");
				var interfaceId=$("#id").val();
				var config = {
					url: ctx + "page/page/new/queryPartImgByParentIdAndInterface",
					type: "post",
					dataType: "json",
					data: "interfaceId="+interfaceId +"&parentId=" + id,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						$("#interfacePartNum").text(result.data.length);
						$("#interfacePartUl").empty();
						for(var i=0; i<result.data.length; i++) {
							$("#interfacePartUl").append('<li class="list-group-item"><img class = "partPage" src="'+result.data[i].filePath+'"/><p style="text-align: center">'+result.data[i].fileName+'</p></li>');
						}
					}
				};
				$.ajax(config);
			}).on('change', '#domainId', function () {
				var id = $(this).val();
				var config = {
					url: ctx + "domainInfo/domainInfo/domainObjectList?id="+id,
					type: "POST",
					dataType: "json",
					data: null,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						$("#domainObjectId").empty();
						domainObjectList = null;
						if (result.data && result.data.length > 0) {
							domainObjectList = result.data;
							for (var i=0; i<result.data.length; i++) {
								$("#domainObjectId").append("<option value='"+result.data[i].id+"'>"+result.data[i].objectName+"</option>");
							}
						}
						changeData()
					}
				};
				$.ajax(config);
			}).on('change', '#domainObjectId', function () {
				changeData();
			}).on('change', '#operateType', function () {
				changeData();
			}).on('change', '#isPlatform', function () {
				changeData();
				var value = $(this).val();
				var fbType = $("#fbType").val();
				if (value == 'Y' && fbType == '2') {
					$("#appType").val("poms");
				}
			}).on('change', '#isManage,#isCommon,#isBoundary', function () {
				changeData();
			}).on('click', '.branch', function () {
				$.operate.addTab2("接口流程分支编辑", ctx + "interface/interfaceArrange?interfaceId=" + $("#id").val());
			}).on('click', ".virtualUsageGroup .icon-jian", function(e) {
				//删除对应数据
				var removeNode1 = $(this).parents(".list-item").parent(".more");
				var removeNode2 = $(this).parents(".list-item");
				var parentNode = $(this).parent();
				var id = parentNode.attr('data-id');
				var url = ctx + "virtualUsageGroup/virtualUsageGroup/remove?ids=" + id;
				var config = {
					url: url,
					type: "post",
					dataType: "json",
					data: null,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						if (result.code == web_status.SUCCESS) {
							removeNode1.remove();
							removeNode2.remove();
							virtualUsageGroup();
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						} else {
							$.modal.alertError(result.msg);
						}
					}
				};
				$.ajax(config);
			}).on("click",".addGroupBtn",function(){
				var btn = ['确定', '取消'];
				var options = {
					title: '添加虚拟用况组信息',
					height: "600",
					url: ctx + "virtualUsageGroup/virtualUsageGroup/add?interfaceId=" + $("#id").val(),
					btn: btn,
					callBack: function (index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.submitHandler(index, layero);
						virtualUsageGroup();
						return false;
					}
				};
				$.modal.openOptions(options);
			}).on("change",".isMasterSelect",function(){
				var id = $(this).find("option:selected").attr("data");
				var isMaster=$(this).val();
				var config = {
					url: ctx + "interfaceinfo/virtualUsage/updateMaster",
					type: "post",
					dataType: "json",
					data: "isMaster="+isMaster +"&id=" + id,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						if (result.code == web_status.SUCCESS) {
							virtualUsage();
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						} else {
							$.modal.alertError(result.msg);
						}
					}
				};
				$.ajax(config);
			}).on('change', ".treeType", function (e) {
				var id = $(this).find("option:selected").attr("data");
				var value = $(this).val();
				var config = {
					url: prefix + "/updateFieldIsTree",
					type: "post",
					dataType: "json",
					data: "id="+id +"&isTree=" + value,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						if (result.code == web_status.SUCCESS) {
							loadInterfaceParams();
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						} else {
							$.modal.alertError(result.msg);
						}
					}
				};
				$.ajax(config);
			});

			function changeData() {
				var domainId = $("#domainId").val();
				var domainObjectId = $("#domainObjectId").val();
				var operateType = $('#operateType').val();
				//var appType = "/" + $('#appType').val();
				var appType = "/oms";
				var isPlatform = $('#isPlatform').val() == "Y" ? "/platform" : "";
				var isManage = $('#isManage').val() == "Y" ? "/mgt" : "";
				var fbType=$("#fbType").val();

				$("#interfaceUrl").val('');
				$("#inParamDtoName").val('');
				$("#outParamDtoName").val('');
				var objectEnName = null, domainEnName = null;
				var objectName = null, domainName = null;

				if (domainId) {
					for(var i=0; i < domainInfoList.length; i++) {
						if (domainId == domainInfoList[i].id) {
							domainEnName = domainInfoList[i].domainEnName;
							domainName = domainInfoList[i].domainName;
							break;
						}
					}
				} else {
					return;
				}
				if (domainObjectId) {
					for(var i=0; i < domainObjectList.length; i++) {
						if (domainObjectId == domainObjectList[i].id) {
							objectEnName = domainObjectList[i].objectEnName;
							objectName = domainObjectList[i].objectName;
							break;
						}
					}
				} else {
					return;
				}
				var isManageZh = $('#isManage').val() == "Y" ? "(管理)" : "";
				var isBoundary=$("#isBoundary").val() == "Y" ? "Border" : "";
				var isBoundaryZh=$("#isBoundary").val() == "Y" ? "(边界)" : "";
				var isCommon=$("#isCommon").val() == "Y" ? "Com" : "";
				var isCommonZh=$("#isCommon").val() == "Y" ? "(公共)" : "";
				var operateTypeName = $("#operateType").find("option:selected").text();
				if (operateTypeName.indexOf('_') >= 0) {
					operateTypeName = operateTypeName.replace("_", objectName);
				} else {
					operateTypeName = operateTypeName + objectName;
				}
				$("#interfaceName").val(operateTypeName + isManageZh + isCommonZh + isBoundaryZh);

				$("#inParamDtoName").val(objectEnName + "ReqDto");
				$("#outParamDtoName").val(objectEnName + "RespDto");
				var tail;
				objectEnName = objectEnName.charAt(0).toUpperCase() + objectEnName.slice(1);
				if (operateType.indexOf('_') >= 0) {
					tail = operateType.replace("_", objectEnName) + isCommon + isBoundary;
				} else {
					tail = operateType + objectEnName + isCommon + isBoundary;
				}
				if (fbType == '2') {
					$("#interfaceUrl").val(appType + isPlatform + isManage + "/" + domainEnName + "/" + tail);
				} else {
					$("#interfaceUrl").val(tail);
				}
			}

			var isMasterList = [[${@dict.getType('masterOrSlave')}]];

			function virtualUsage() {
				var config = {
					url: prefix + "/virtualUsageList?interfaceId="+$("#id").val(),
					type: "post",
					dataType: "json",
					data: null,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						if (result.code == web_status.SUCCESS) {
							var data = {};
							data.list = result.data || [];
							data.isMasterList = isMasterList;
							data.isBranch =isBranch;
							var paramsTplHtml = $("#virtualUsageTpl").html();
							laytpl(paramsTplHtml).render(data, function (html) {
								$("#left-three").empty();
								$("#left-three").append(html);
							});
							initListInterfaceDragula();

							paramsTplHtml = $("#virtualUsageTpl2").html();
							laytpl(paramsTplHtml).render(data, function (html) {
								$("#virtualUsage").nextAll().remove();
								$("#virtualUsage").after(html);
							});
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						} else {
							$.modal.alertError(result.msg);
						}
					}
				};
				$.ajax(config);
			}

			function virtualUsageGroup() {
				var config = {
					url: ctx + "virtualUsageGroup/virtualUsageGroup/list?interfaceId="+$("#id").val(),
					type: "post",
					dataType: "json",
					data: null,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						if (result.code == web_status.SUCCESS) {
							var data = {};
							data.list = result.data || [];
							data.isBranch =isBranch;
							var paramsTplHtml = $("#virtualUsageGroupTpl").html();
							laytpl(paramsTplHtml).render(data, function (html) {
								$("#left-four").empty();
								$("#left-four").append(html);
							});
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						} else {
							$.modal.alertError(result.msg);
						}
					}
				};
				$.ajax(config);
			}

			function initListInterfaceDragula() {
				var containers = $('.listInterface').toArray();
				dragula(containers, {
					accepts: function(el, target, source, sibling) {
						return target == source;
					}
				}).on('drop', function(el, container) {
					//拖动结束后执行方法
					var interfaceList = [];
					var sortNum = 1;
					$(".listInterface").find('.list-item').each(function(){
						var data = {};
						if ($(this).attr('data-id') && $(this).attr('data-id') != 'undefined' && $(this).attr('data-id') != 'null') {
							data.id = $(this).attr('data-id');
						}
						data.sortNum = sortNum;
						sortNum ++;
						interfaceList.push(data);
					});
					var config = {
						url: prefix + "/updateInterfaceSort",
						type: "post",
						contentType: "application/json;charset=utf-8",
						dataType: "json",
						data: JSON.stringify(interfaceList),
						beforeSend: function () {
							$.modal.loading("正在处理中，请稍后...");
						},
						success: function(result) {
							$.modal.closeLoading();
							if (result.code == web_status.SUCCESS) {
								virtualUsage();
								loadInterfaceParams();
							} else if (result.code == web_status.WARNING) {
								$.modal.alertWarning(result.msg)
							} else {
								$.modal.alertError(result.msg);
							}
						}
					};
					$.ajax(config);
				})
			}

			function submitHandler() {
				var data = $('#bffForm').serializeArray();
				var pageIds = $('#pageIds').selectpicker('val');
				var usageId = $('#usageId').selectpicker('val');
				data.push({"name": "pageIds", "value": pageIds});
				data.push({"name": "usageId", "value": usageId});
				var config = {
					url: prefix + "/edit",
					type: "post",
					// contentType: "application/json;charset=utf-8",
					dataType: "json",
					data: $('#bffForm').serialize(),
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						if (result.code == web_status.SUCCESS) {
							$.modal.msgSuccess("保存成功");
							$("#nonFunctionalRequirementsDd").text($("#nonFunctionalRequirements").val())
							$("#interfaceDescriptionDd").text($("#interfaceDescription").val());
							appType=$("#appType").val();
							isBranch = $("#isBranch").val();
							if (isBranch == 'Y') {
								$('#fourLi').show();
							} else {
								$('#fourLi').hide();
							}
							loadInterfaceParams();
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						} else {
							$.modal.alertError(result.msg);
						}
					}
				};
				$.ajax(config);
			}

			var paramType = 1;
			function clickTab(type) {
				paramType = type;
			}

			$(".addFieldBtn").click(function() {
				var paramName = "入参";
				if (paramType == 2) {
					paramName="出参";
				}
				var btn = ['确定', '取消','<span style = "color:#000000">已选择<span id="fieldSelected">0</span>项</span>'];
				var options = {
					title: '选择'+paramName+'字段',
					height: "600",
					url: prefix + "/bff_field_choose/" + $("#id").val() +"/" + paramType,
					btn: btn,
					callBack: function (index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.submitHandler(index, layero);
						loadInterfaceParams();
						return false;
					}
				};
				$.modal.openOptions(options);
			});

			$(".addDataMapBtn").click(function() {
				let btn = ['确定', '取消','<img th:src="@{/img/Icon-add.png}" class="icon" style="padding-right: 4px;" />新增结果集',];
				var paramName = "入参";
				var domainObjectId = $("#domainObjectId").val() || 0;
				if (paramType == 2) {
					paramName="出参";
				}
				let options = {
					title: '选择'+paramName+'数据集',
					height: "600",
					url: prefix + "/data_map_choose/" + paramType + "/" + $("#id").val() + "/2",
					btn: btn,
					callBack: function (index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.submitHandler(index, layero);
						loadInterfaceParams();
						return false;
					},
					btn3: function(index2, layero2) {
						layer.close(index2);
						createParams(domainObjectId);
						return false;
					}

				};
				$.modal.openOptions(options);
			});


			function createParams(domainObjectId) {
				let btn = ['保存', '取消'];
				let options = {
					title: '创建数据集',
					width: "700",
					height: "400",
					url: prefix + "/data_map_create/" + paramType + "/"+domainObjectId + "/" + $("#id").val() + "/2",
					btn: btn,
					callBack: function (index, layero) {
						var iframeWin = layero.find('iframe')[0];
						var flag = iframeWin.contentWindow.submitHandler(index, layero);
						if (flag) {
							layer.close(index);
							loadInterfaceParams();
						} else {
							return flag;
						}
					}
				};
				$.modal.openOptions(options);
			}

			/**
			 * 添加数据集字段
			 * @param id
			 */
			function addParamsField(id) {
				var btn = ['确定', '取消','<span style = "color:#000000">已选择<span id="fieldSelected">0</span>项</span>'];
				var options = {
					title: '选择数据集字段',
					height: "600",
					url: prefix + "/bff_params_field_choose/" + $("#id").val() +"/" + paramType + "/" + id,
					btn: btn,
					callBack: function (index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.submitHandler(index, layero);
						loadInterfaceParams();
						return false;
					}
				};
				$.modal.openOptions(options);
			}

			$(".deleteBtn").click(function () {
				var fieldDiv = $("#params-in");
				if (paramType == 2) {
					fieldDiv = $("#params-out");
				}
				fieldDiv.find(".icon-jian").each(function () {
					//删除对应数据
					var removeNode1 = $(this).parents(".list-item").parent(".more");
					var removeNode2 = $(this).parents(".list-item");
					var parentNode = $(this).parent();
					var type = parentNode.attr('data-type');
					var id = parentNode.attr('data-id');
					var url = prefix + "/removeField/" + id;
					if (type == 2) {
						url = prefix + "/removeParamsField/" + id;
					}
					var config = {
						url: url,
						type: "get",
						dataType: "json",
						async: false,
						data: null,
						beforeSend: function () {
							$.modal.loading("正在处理中，请稍后...");
						},
						success: function(result) {
							$.modal.closeLoading();
							if (result.code == web_status.SUCCESS) {
								removeNode1.remove();
								removeNode2.remove();
							} else if (result.code == web_status.WARNING) {
								$.modal.alertWarning(result.msg)
							} else {
								$.modal.alertError(result.msg);
							}
						}
					};
					$.ajax(config);
				});
				loadInterfaceParams();
			})
			var pageIds = [[${pageIds}]];
			var productIds = [[${productIds}]];
			var usageId = [[${interfaceInfo.usageId}]];
			$(function() {
				loadInterfaceParams();

				/**标签切换事件*/
				$(".contentTab a").click(function (e) {
					var action = $(this).data("action");
					if(action) {
						window[action]();
					}
				});
				$('#pageIds').selectpicker();
				$('#pageIds').selectpicker('val', pageIds);
				$('#productIds').selectpicker();
				$('#productIds').selectpicker('val', productIds);
				var arr = [];
				arr.push(usageId);
				$("#usageId").val(arr).trigger("change");
			})

			/**
			 * 加载 接口参数
			 */
			function loadInterfaceParams() {
				var id = $("#id").val();
				var config = {
					url: prefix + "/bffParamList",
					type: "post",
					dataType: "json",
					data: "interfaceId="+id,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						$("#params-in").empty();
						$("#params-out").empty();
						if (result.code == web_status.SUCCESS) {
							var resultJson = result.data;
							if(!resultJson) {
								return false;
							}
							initParam(resultJson.requestList, "#params-in");
							initParam(resultJson.responseList, "#params-out");
							doPreview(resultJson);
							initDragula();
							initSelectChange();
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						} else {
							$.modal.alertError(result.msg);
						}
					}
				};
				$.ajax(config);
			}

			function initSelectChange() {
				$(".paramSelect .fieldStatus").change(function () {
					var id = $(this).find("option:selected").attr("data");
					var value = $(this).val();
					var config = {
						url: prefix + "/updateBffFieldStatus",
						type: "post",
						dataType: "json",
						data: "id="+id +"&statusId=" + value,
						beforeSend: function () {
							$.modal.loading("正在处理中，请稍后...");
						},
						success: function(result) {
							$.modal.closeLoading();
							if (result.code == web_status.SUCCESS) {
								loadInterfaceParams();
							} else if (result.code == web_status.WARNING) {
								$.modal.alertWarning(result.msg)
							} else {
								$.modal.alertError(result.msg);
							}
						}
					};
					$.ajax(config);
				});
			}

			function initParam(params, id) {
				var data = {};
				data.list = params;
				if ("#params-out" == id) {
					data.isInParam=0;
				} else {
					data.isInParam=1;
				}
				if ("#params-out" == id && $("#isTree").val() == 'Y') {
					data.isTree = true;
				}
				var paramsTplHtml = $("#paramsTpl").html();
				laytpl(paramsTplHtml).render(data, function (html) {
					$(id).append(html);
				});
			}

			function initDragula() {
				var containers = $('.list').toArray();
				containers = containers.concat($('.sec-list').toArray());
				dragula(containers, {
					accepts: function(el, target, source, sibling) {
						return target == source;
					}
				}).on('drop', function(el, container) {
					var data = {
						'id' : $("#id").val(),
						'fbType':'1'
					};
					var interfaceParamReqList = [];
					interfaceParamReqList = getParams("#params-in", "1", interfaceParamReqList);
					interfaceParamReqList = getParams("#params-out", "2", interfaceParamReqList);
					data.interfaceParamReqList = interfaceParamReqList;
					var config = {
						url: prefix + "/updateSort",
						type: "post",
						contentType: "application/json;charset=utf-8",
						dataType: "json",
						data: JSON.stringify(data),
						beforeSend: function () {
							$.modal.loading("正在处理中，请稍后...");
						},
						success: function(result) {
							$.modal.closeLoading();
							if (result.code == web_status.SUCCESS) {
								loadInterfaceParams();
							} else if (result.code == web_status.WARNING) {
								$.modal.alertWarning(result.msg)
							} else {
								$.modal.alertError(result.msg);
							}
						}
					};
					$.ajax(config);
				})
			}

			function getParams(id,isInParam, interfaceParamReqList) {
				var sortNum = 1;
				$(id).find('.no-top').each(function(){
					var data = {};
					if ($(this).attr('data-id') && $(this).attr('data-id') != 'undefined' && $(this).attr('data-id') != 'null') {
						data.id = $(this).attr('data-id');
					}
					data.objectType = $(this).attr('data-object-type');
					data.objectId = $(this).attr('data-field-id');
					data.isInParam = isInParam;
					data.sortNum = sortNum;
					sortNum ++;
					if ($(this).hasClass('more')) {
						var paramsFieldReqList = getChildParam($(this));
						if (paramsFieldReqList && paramsFieldReqList.length > 0) {
							data.paramsFieldReqList = paramsFieldReqList;
						}
					}
					interfaceParamReqList.push(data);
				});
				return interfaceParamReqList;
			}

			function getChildParam(e) {
				var paramsFieldReqList = [];
				var sortNum = 1;
				$(e).find('.sec-list .list-item').each(function(){
					var child = {};
					if ($(this).attr('data-id') && $(this).attr('data-id') != 'undefined' && $(this).attr('data-id') != 'null') {
						child.id = $(this).attr('data-id');
					}
					child.fieldId = $(this).attr('data-field-id');
					child.sortNum = sortNum;
					sortNum ++;
					paramsFieldReqList.push(child);
				});
				return paramsFieldReqList;
			}

			/**
			 * 预览
			 */
			function doPreview(data) {
				var interfaceType = $("#fbType").val();
				data.interfaceType= interfaceType;
				var contentPreviewTplHtml = $("#contentPreviewTpl").html();
				convertResponse(data);

				laytpl(contentPreviewTplHtml).render(data, function (html) {
					$("#collapse0 .panel-body").remove();
					$("#collapse0").append(html);
				});

				$("#nonFunctionalRequirementsDd").text($("#nonFunctionalRequirements").val())
				$("#interfaceDescriptionDd").text($("#interfaceDescription").val())

				// 加载虚拟用况数据
				var virtualUsageListConfig = {
					url: prefix + "/virtualUsageList?interfaceId="+$("#id").val(),
					type: "post",
					dataType: "json",
					data: null,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						if (result.code == web_status.SUCCESS) {
							var data = {};
							data.list = result.data || [];
							var paramsTplHtml = $("#virtualUsageTpl2").html();
							laytpl(paramsTplHtml).render(data, function (html) {
                                $("#virtualUsage").nextAll().remove();
                                $("#virtualUsage").after(html);
							});
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						} else {
							$.modal.alertError(result.msg);
						}
					}
				};
				$.ajax(virtualUsageListConfig);

				relationTableList();
			}

			function paramList(idName,interfaceId,interfaceType) {
				idName = idName;
				var params = {};
				params.interfaceId = interfaceId;
				params.interfaceType = interfaceType;
				var resultJson;
				var config = {
					url: prefix + "/paramList",
					type: "POST",
					dataType: "json",
					data: params,
					success: function (result) {
						if (result && result.code == 0) {
							var data = result.data;
							var contentPreviewTplHtml = $("#contentPreviewTpl").html();
							convertResponse(data);
							data.virtualUsage=true;
							laytpl(contentPreviewTplHtml).render(data, function (html) {
								$(idName).empty();
								$(idName).append(html);
							});
						}
					}
				};
				$.ajax(config);
			}

			/**
			 * 关联表列表函数
			 */
			function relationTableList() {
				var params = {};
				params.interfaceId = $("input[name='id']").val();
				params.interfaceType = $("#fbType").val();
				var resultJson;
				var config = {
					url: prefix + "/interfaceTableList",
					type: "POST",
					dataType: "json",
					async: false,
					data: params,
					success: function (result) {
						if (result && result.code == 0) {
							resultJson = result.data;
						}
					}
				};
				$.ajax(config);
				if(!resultJson) {
					return false;
				}
				$.each(resultJson, function (index, a) {
					if (null == a.fieldInfoList || 0 == a.fieldInfoList.length) {
						return;
					}
					let category = a.fieldInfoList[0].category;
					$.each(a.fieldInfoList, function (indexB, b) {
						b.categorySpace = false;
						if (category != b.category) {
							b.categorySpace = true;
							category = b.category;
						}
					});
				});
				var contentTableTplHtml = $("#contentTableTpl").html();
				laytpl(contentTableTplHtml).render(resultJson, function (html) {
					$("#content-table").empty();
					$("#content-table").append(html);
				});
			};

			/**
			 * 关联页面函数
			 */
			function relationPageList() {
				var params = {};
				params.interfaceId = $("input[name='id']").val();
				var resultJson;
				var config = {
					url: prefix + "/pageList",
					type: "POST",
					dataType: "json",
					async: false,
					data: params,
					success: function (result) {
						if (result && result.code == 0) {
							resultJson = result.data;
						}
					}
				};
				$.ajax(config);
				var contentPageTplHtml = $("#contentPageTpl").html();
				laytpl(contentPageTplHtml).render(resultJson, function (html) {
					$("#content-page").empty();
					$("#content-page").append(html);
				});
			};

			function relationTestLog() {
				var interfaceId = $("input[name='id']").val();
				var config = {
					url: ctx + "interfaceTestLog/interfaceTestLog/getContent?interfaceId="+interfaceId,
					type: "get",
					dataType: "json",
					async: false,
					data: null,
					success: function (result) {
						if (result && result.data) {
							$("#content").html(result.data.content.replace(/\n/g,'<br>'));
							$("#content-time").html(result.data.updateTime);
						}
					}
				};
				$.ajax(config);
			}

			/**
			 * 关联用况函数
			 */
			function relationUsageList() {
				var params = {};
				params.interfaceId = $("input[name='id']").val();
				var resultJson;
				var config = {
					url: prefix + "/usageList",
					type: "POST",
					dataType: "json",
					async: false,
					data: params,
					success: function (result) {
						if (result && result.code == 0) {
							resultJson = result.data;
						}
					}
				};
				$.ajax(config);
				if(!resultJson) {
					return false;
				}
				var contentUsageTplHtml = $("#contentUsageTpl").html();
				laytpl(contentUsageTplHtml).render(resultJson, function (html) {
					$("#content-usage").empty();
					$("#content-usage").append(html);
				});
			};

			/**
			 * 虚拟用况页面
			 * @param id
			 */
			function virtualUsageDetail(id) {
				$.modal.openTab("虚拟用况接口编辑", prefix + "/bff_usage_params/" + id);
			}

			/**
			 * 虚拟用况组页面
			 * @param id
			 */
			function virtualUsageGroupDetail(id) {
				$.modal.openTab("虚拟用况组编辑", ctx + "virtualUsageGroup/virtualUsageGroup/edit?id=" + id);
			}

			function fieldDesign(id, type) {
				var url = prefix + "/fieldDesign?id="+id + "&type="+type;
				var width = $(window).width() - 50, height = $(window).height() - 50;
				layer.open({
					type: 2,
					area: [width + 'px', height + 'px'],
					fix: false,
					//不固定
					maxmin: true,
					shade: 0.3,
					title: "字段详细设计",
					content: url,
					btn: ['确定', '重置', '关闭'],
					// 弹层外区域关闭
					shadeClose: true,
					yes: function(index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.submitHandler(index, layero);
						loadInterfaceParams();
						layer.close(index);
						return true;
					},
					btn2: function(index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.resetHandler(index, layero);
						loadInterfaceParams();
						layer.close(index);
						return true;
					},
					btn4: function(index, layero) {
						return true;
					},
					cancel: function(index) {
						return true;
					}
				});
			}

			function virtualUsageModelSelect(id) {
				var url = ctx + "interfaceinfo/virtualUsage/virtualUsageModelSelect?id="+id;
				var width = $(window).width() - 50, height = $(window).height() - 50;
				layer.open({
					type: 2,
					area: [width + 'px', height + 'px'],
					fix: false,
					//不固定
					maxmin: true,
					shade: 0.3,
					title: "虚拟用况模式选择",
					content: url,
					btn: ['确定', '重置', '关闭'],
					// 弹层外区域关闭
					shadeClose: true,
					yes: function(index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.submitHandler(index, layero);
						virtualUsage();
						layer.close(index);
						return true;
					},
					btn2: function(index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.resetHandler(index, layero);
						virtualUsage();
						layer.close(index);
						return true;
					},
					btn4: function(index, layero) {
						return true;
					},
					cancel: function(index) {
						return true;
					}
				});
			}


			function virtualUsageGroupModelSelect(id) {
				var url = ctx + "virtualUsageGroup/virtualUsageGroup/virtualUsageGroupModelSelect?id="+id;
				var width = $(window).width() - 50, height = $(window).height() - 50;
				layer.open({
					type: 2,
					area: [width + 'px', height + 'px'],
					fix: false,
					//不固定
					maxmin: true,
					shade: 0.3,
					title: "虚拟用况组模式选择",
					content: url,
					btn: ['确定', '重置', '关闭'],
					// 弹层外区域关闭
					shadeClose: true,
					yes: function(index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.submitHandler(index, layero);
						virtualUsageGroup();
						layer.close(index);
						return true;
					},
					btn2: function(index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.resetHandler(index, layero);
						virtualUsageGroup();
						layer.close(index);
						return true;
					},
					btn4: function(index, layero) {
						return true;
					},
					cancel: function(index) {
						return true;
					}
				});
			}

			// 设置别名
			function setAliasName(id, type) {
				var url = prefix + "/setAliasName?id="+id + "&type="+type;
				var width = $(window).width() - 50, height = $(window).height() - 50;
				layer.open({
					type: 2,
					area: [width + 'px', height + 'px'],
					fix: false,
					//不固定
					maxmin: true,
					shade: 0.3,
					title: "设置字段别名和模式",
					content: url,
					btn: ['确定', '关闭'],
					// 弹层外区域关闭
					shadeClose: true,
					yes: function(index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.submitHandler(index, layero);
						loadInterfaceParams();
						layer.close(index);
						return true;
					},
					cancel: function(index) {
						return true;
					}
				});
			}

			// 参数字段来源选择
			function outParamFieldSourceChoose(id, type) {
				var url = prefix + "/outParamFieldSourceChoose?interfaceFieldId="+id+"&interfaceFieldType="+type+"&interfaceId="+$("#id").val();
				var width = $(window).width() - 50, height = $(window).height() - 50;
				layer.open({
					type: 2,
					area: [width + 'px', height + 'px'],
					fix: false,
					//不固定
					maxmin: true,
					shade: 0.3,
					title: "虚拟用况模式选择",
					content: url,
					btn: ['确定', '重置', '关闭'],
					// 弹层外区域关闭
					shadeClose: true,
					yes: function(index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.submitHandler(index, layero);
						loadInterfaceParams();
						layer.close(index);
						return true;
					},
					btn2: function(index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.resetHandler(index, layero);
						loadInterfaceParams();
						layer.close(index);
						return true;
					},
					btn4: function(index, layero) {
						return true;
					},
					cancel: function(index) {
						return true;
					}
				});
			}

			function fieldDesign2(id, type) {
				var url = prefix + "/fieldDesign2?id="+id + "&type="+type;
				var width = $(window).width() - 50, height = $(window).height() - 50;
				layer.open({
					type: 2,
					area: [width + 'px', height + 'px'],
					fix: false,
					//不固定
					maxmin: true,
					shade: 0.3,
					title: "字段详细设计",
					content: url,
					btn: ['确定', '重置', '关闭'],
					// 弹层外区域关闭
					shadeClose: true,
					yes: function(index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.submitHandler(index, layero);
						loadInterfaceParams();
						layer.close(index);
						return true;
					},
					btn2: function(index, layero) {
						var iframeWin = layero.find('iframe')[0];
						iframeWin.contentWindow.resetHandler(index, layero);
						loadInterfaceParams();
						layer.close(index);
						return true;
					},
					btn4: function(index, layero) {
						return true;
					},
					cancel: function(index) {
						return true;
					}
				});
			}
		</script>

		<script id="paramsTpl" type="text/template">
			<div id="list" class="list">
				{{# layui.each(d.list, function(index, a){ }}
				{{# if(a.objectType == '2'){ }}
				<div class="more mb-12 no-top" data-id="{{a.id}}" data-field-id="{{a.fieldId}}" data-object-type="2">
					<div class="list-item">
						{{# if(d.isInParam == 1){ }}
						<span class="col-md-4"><img th:src="@{/img/Icon-yidongshu.png}" class="icon"/>{{a.fieldName}}</span>
						{{# } else { }}
						<span class="col-md-4"><img th:src="@{/img/Icon-yidongshu.png}" class="icon"/><a class="{{# if(a.isAllowEmpty) { }} red {{# } }}" onclick="fieldDesign2({{a.id}}, 1)">{{a.fieldName}}</a></span>
						{{# } }}
						<span class="col-md-3">{{a.fieldEnName}}</span>
						{{# if(d.isTree){ }}
						<select class="form-control state-select nodeType">
							<option data="{{a.id}}" value="0">请选择</option>
							{{# if(a.nodeType == 'F'){ }}
							<option data="{{a.id}}" value="F" selected="selected">父</option>
							<option data="{{a.id}}" value="Z">子</option>
							{{# } else if(a.nodeType == 'Z'){ }}
							<option data="{{a.id}}" value="F">父</option>
							<option data="{{a.id}}" value="Z" selected="selected">子</option>
							{{# } else { }}
							<option data="{{a.id}}" value="F">父</option>
							<option data="{{a.id}}" value="Z">子</option>
							{{# } }}
						</select>
						<select class="form-control state-select treeType">
							<option data="{{a.id}}" value="0">请选择</option>
							{{# if(a.isTree == 'Y'){ }}
							<option data="{{a.id}}" value="Y" selected="selected">是树形</option>
							<option data="{{a.id}}" value="N">不是树形</option>
							{{# } else if(a.isTree == 'N'){ }}
							<option data="{{a.id}}" value="Y">是树形</option>
							<option data="{{a.id}}" value="N" selected="selected">不是树形</option>
							{{# } else { }}
							<option data="{{a.id}}" value="Y">是树形</option>
							<option data="{{a.id}}" value="N">不是树形</option>
							{{# } }}
						</select>
						{{# } }}
						<span class="pull-right" data-id="{{a.id}}" data-type="1"><img th:src="@{/img/Icon-jianshao.png}" class="icon-jian" /></span>
					</div>
					<div class="sec-list">
						{{# if(a.children){ }}
						{{# layui.each(a.children, function(index, b){ }}
						<div class="list-item" data-id="{{b.id}}" data-field-id="{{a.fieldId}}">
							{{# if(d.isInParam == 1){ }}
							<span class="col-md-4"><img th:src="@{/img/Icon-yidongheng.png}" class="icon" /><a class="{{# if(b.aliasName || b.aliasZhName  || b.designContent  || b.fieldDescription) { }} red {{# } }}" onclick="fieldDesign({{b.id}}, 2)">{{b.fieldName}}</a></span>
							<span class="col-md-3">{{b.fieldEnName}}</span>
							{{# if(b.isRequiredParent == 'Y') { }}
							<select class="form-control state-select isRequiredSelect" disabled="true">
								{{# } else { }}
								<select class="form-control state-select isRequiredSelect">
									{{# } }}
									{{# if(b.isRequired == 'Y') { }}
									<option data="{{b.id}}" data-type="2" value="Y" selected="selected">必填</option>
									<option data="{{b.id}}" data-type="2" value="N">非必填</option>
									{{# } else if(b.isRequired == 'N'){ }}
									<option data="{{b.id}}" data-type="2" value="Y">必填</option>
									<option data="{{b.id}}" data-type="2" value="N" selected="selected">非必填</option>
									{{# } else { }}
									<option data="{{b.id}}" data-type="2" value="N">非必填</option>
									<option data="{{b.id}}" data-type="2" value="Y">必填</option>

									{{# } }}
								</select>
							{{# } else { }}
								<span class="col-md-4"><img th:src="@{/img/Icon-yidongheng.png}" class="icon" /><a  class="{{# if(b.aliasName || b.aliasZhName  || b.isAllowEmpty || b.treeModel || b.otherModel) { }} red {{# } }}" onclick="fieldDesign2({{b.id}}, 2)">{{b.fieldName}}</a></span>
							<span class="col-md-3">{{b.fieldEnName}}</span>
							<span class="col-md-2">{{b.fieldDataType}}</span>
								<span class="col-md-1"><a class="{{# if(b.sourceFlag) { }} red {{# } }}" onclick="outParamFieldSourceChoose({{b.id}}, 3)">来源</a></span>
								{{# } }}

							<span class="pull-right" data-id="{{b.id}}" data-type="2"><img th:src="@{/img/Icon-jianshao.png}" class="icon-jian" /></span>
						</div>
						{{# }); }}
						{{# } }}
					</div>
					<div class="blue btn-add addFieldBtn" onclick="addParamsField({{a.id}})"><img th:src="@{/img/Icon-add.png}" class="icon" style="padding-right: 4px;" />选择字段</div>
				</div>
				{{# } else {}}
				{{# if(a.id){ }}
				<div class="list-item mb-12 no-top" data-id="{{a.id}}" data-field-id="{{a.fieldId}}" data-object-type="1">
					{{# if(d.isInParam == 1){ }}
					<span class="col-md-4" title="{{a.fieldName}}"><img th:src="@{/img/Icon-yidongshu.png}" class="icon"/><a class="{{# if(a.aliasName || a.aliasZhName  || a.designContent || a.fieldDescription) { }} red {{# } }}" onclick="fieldDesign({{a.id}}, 1)">{{a.fieldName}}</a></span>
					<span class="col-md-3" title="{{a.fieldEnName}}">{{a.fieldEnName}}</span>
					{{# if(a.isRequiredParent == 'Y') { }}
					<select class="form-control state-select isRequiredSelect" disabled="true">
						{{# } else { }}
						<select class="form-control state-select isRequiredSelect">
							{{# } }}
							{{# if(a.isRequired == 'Y') { }}
							<option data="{{a.id}}" data-type="1" value="Y" selected="selected">必填</option>
							<option data="{{a.id}}" data-type="1" value="N">非必填</option>
							{{# } else if(a.isRequired == 'N'){ }}
							<option data="{{a.id}}" data-type="1" value="Y">必填</option>
							<option data="{{a.id}}" data-type="1" value="N" selected="selected">非必填</option>
							{{# } else { }}
							<option data="{{a.id}}" data-type="1" value="N">非必填</option>
							<option data="{{a.id}}" data-type="1" value="Y">必填</option>

							{{# } }}
						</select>
					{{# } else { }}
						<span class="col-md-4" title="{{a.fieldName}}"><img th:src="@{/img/Icon-yidongshu.png}" class="icon"/><a class="{{# if(a.aliasName  || a.aliasZhName  || a.isAllowEmpty ||a.treeModel || a.otherModel) { }} red {{# } }}" onclick="fieldDesign2({{a.id}}, 1)">{{a.fieldName}}</a></span>
					<span class="col-md-3" title="{{a.fieldEnName}}">{{a.fieldEnName}}</span>
					<span class="col-md-2">{{a.fieldDataType}}</span>
						<span class="col-md-1"><a class="{{# if(a.sourceFlag) { }} red {{# } }}" onclick="outParamFieldSourceChoose({{a.id}}, 1)">来源</a></span>
						{{# } }}

					<span class="pull-right" data-id="{{a.id}}" data-type="1"><img th:src="@{/img/Icon-jianshao.png}" class="icon-jian"/></span>
				</div>
				{{# } }}
				{{# } }}
				{{# }); }}
			</div>
		</script>

		<!--关联字段模板-->
		<script id="contentPreviewTpl" type="text/template">
			{{# if(d.virtualUsage){ }}
				<dl class="dl-horizontal">
					<dt>接口描述</dt>
					<dd>{{d.interfaceInfo.interfaceDescription}}</dd>
				</dl>
				<div class="panel-tit">参数</div>
			{{# } }}
			<div class="panel-body" style = "border:0px;">
				<ul class="list-group">
					<li class="list-group-item" style="height: auto; padding-top:0px;">
						<div class="re-body">
							<p>requestBody：//输入参数</p>
							<p>{</p>
							<ul class="list-group field">
								{{# layui.each(d.requestList, function(index, a){ }}
								{{# if(a.children == null || a.children.length == 0){ }}
								<li class="list-group-item">
									{{# if(a.objectType=='2'){ }}
									<p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '-'}}</p>
									<br>
									<p>}],</p>
									{{# } else { }}
									<p>"{{a.fieldEnName}}" : "{{a.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{a.fieldName || '-'}}{{a.fieldEnumListName || ''}}</span></p>
									{{# } }}
								</li>
								{{# } else { }}
								<li class="list-group-item">
									{{# if(a.children.length > 1){ }}
										<p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '一'}}</p>
										<ul class="list-group field">
											{{# layui.each(a.children, function(index, b){ }}
											<li class="list-group-item" style = "margin-left:10px;">
												<p>"{{b.fieldEnName}}" : "{{b.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{b.fieldName || '一'}}{{b.fieldEnumListName || ''}}</span></p>
											</li>
											{{# }); }}
										</ul>
										<p>}],</p>
									{{# } else { }}
										<p>"{{a.fieldEnName}}" : ["{{a.children[0].mockData || '一'}}"] // {{a.fieldName || '一'}}</p>
									{{# } }}
								</li>
								{{# }}}
								{{# }); }}
							</ul>
							<p>}</p>
						</div>
					</li>
					<li class="list-group-item space"></li>
					<li class="list-group-item" style="height: auto;padding-top:0px;">
						<div class="re-body">
							<p>response：//返回参数</p>
							<p>{</p>
							<ul class="list-group field">
								<li class="list-group-item">
									<p>"errCode" : "1",<span style="color: red; display: inline !important;"> //返回状态（true/false）</span></p>
									<p>"message" : "获取成功",<span style="color: red; display: inline !important;"> //获取成功/获取失败</span></p>
									<p>"data" : { <span style="color: red; display: inline !important;"> //返回数据</span></p>
									<ul class="list-group field">
										{{# layui.each(d.responseList, function(index, a){ }}
										{{# if(a.children == null || a.children.length == 0){ }}
										<li class="list-group-item">
											{{# if(a.objectType=='2'){ }}
											<p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '一'}}</p>
											<p>}],</p>
											{{# } else { }}
												{{# if(a.fieldEnName == 'total' || a.fieldEnName == 'isLastPage' || a.fieldEnName == 'pages'){ }}
												<p>"{{a.fieldEnName}}" : {{a.mockData}}, // <span style="color: #FFA500; display: inline !important;">{{a.fieldName || '一'}}{{a.fieldEnumListName || ''}}</span></p>
												{{# } else { }}
												<p>"{{a.fieldEnName}}" : "{{a.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{a.fieldName || '一'}}{{a.fieldEnumListName || ''}}</span></p>
												{{# } }}
											{{# } }}
										</li>
										{{# } else { }}
										<li class="list-group-item">
											<p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '一'}}</p>
											<ul class="list-group field">
												{{# layui.each(a.children, function(index, b){ }}
												{{# if(b.children == null || b.children.length == 0){ }}
												<li class="list-group-item">
													{{# if(b.objectType=='2'){ }}
													<p>"{{b.fieldEnName}}" : [{ // {{b.fieldName || '一'}}</p>
													<p>}],</p>
													{{# } else { }}
													<p>"{{b.fieldEnName}}" : "{{b.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{b.fieldName || '一'}}{{b.fieldEnumListName || ''}}</span></p>
													{{# } }}
												</li>
												{{# } else { }}
												<li class="list-group-item">
													<p>"{{b.fieldEnName}}" : [{ // {{b.fieldName || '一'}}</p>
													<ul class="list-group field">
														{{# layui.each(b.children, function(index, c){ }}
														{{# if(c.children == null || c.children.length == 0){ }}
														<li class="list-group-item">
															{{# if(c.objectType=='2'){ }}
															<p>"{{c.fieldEnName}}" : [{ // {{c.fieldName || '一'}}</p>
															<p>}],</p>
															{{# } else { }}
															<p>"{{c.fieldEnName}}" : "{{c.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{c.fieldName || '一'}}{{c.fieldEnumListName || ''}}</span></p>
															{{# } }}
														</li>
														{{# } else { }}
														<li class="list-group-item">
															<p>"{{c.fieldEnName}}" : [{ // {{c.fieldName || '一'}}</p>
															<ul class="list-group field">
																{{# layui.each(c.children, function(index, d){ }}
																{{# if(d.children == null || d.children.length == 0){ }}
																<li class="list-group-item">
																	{{# if(d.objectType=='2'){ }}
																	<p>"{{d.fieldEnName}}" : [{ // {{d.fieldName || '一'}}</p>
																	<p>}],</p>
																	{{# } else { }}
																	<p>"{{d.fieldEnName}}" : "{{d.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{d.fieldName || '一'}}{{d.fieldEnumListName || ''}}</span></p>
																	{{# } }}
																</li>
																{{# } else { }}
																<li class="list-group-item">
																	<p>"{{d.fieldEnName}}" : [{ // {{d.fieldName || '一'}}</p>
																	<ul class="list-group field">
																		{{# layui.each(d.children, function(index, e){ }}
																		<li class="list-group-item">
																			<p>"{{e.fieldEnName}}" : "{{e.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{e.fieldName || '一'}}{{e.fieldEnumListName || ''}}</span></p>
																		</li>
																		{{# }); }}
																	</ul>
																	<p>}],</p>
																</li>
																{{# } }}
																{{# }); }}
															</ul>
														</li>
														{{# } }}
														{{# }); }}
													</ul>
													<p>}],</p>
												</li>
												{{# } }}
												{{# }); }}
											</ul>
											<p>}],</p>
										</li>
										{{# }}}
										{{# }); }}
									</ul>
									<p>}</p>
								</li>
							</ul>
							<p>}</p>
						</div>
					</li>
				</ul>
			</div>
		</script>

		<script id="virtualUsageTpl2" type="text/template">
			{{# layui.each(d.list, function(index, a){ }}
			<div class="panel panel-default virtualUsage" title="{{a.description}}">
				<div class="panel-heading" data-toggle="collapse"  href="#collapse{{a.sortNum}}" data-id="{{a.id}}">
					<h1 class="panel-title">
						<span class="badge badge-primary">{{index + 1}}</span>
						<span>{{a.slaveInterfaceName}}&nbsp;&nbsp;{{a.dubboUrl}}</span>
					</h1>
				</div>
				<div id="collapse{{a.sortNum}}" class="panel-collapse collapse"></div>
			</div>
			{{# }); }}
		</script>

		<!--关联字段模板-->
		<script id="contentTableTpl" type="text/template">
			{{# layui.each(d, function(index, a){ }}
			<div class="retation-table">
				<p class="blue-background">
					<img th:src="@{/img/table.png}">
					<span>{{a.tableName}}&nbsp;&nbsp;{{a.tableEnName}}</span>
					<span  style="color: #0088FF;float: right;margin-right: 12px;"><a class = "table-detail" tableId = "{{a.id}}">查看详情</a></span>
				</p>
				<ul class="list-group">
					{{# layui.each(a.fieldInfoList, function(indexB, b){ }}
					{{# if(b.categorySpace) { }}
					<li class="list-group-item space"></li>
					{{# }}}
					<li class="list-group-item">
						<font>{{# if(b.fieldType=='1') { }} PK {{# } else if(b.fieldType == '2') { }} FK {{#} else { }}-{{#}}}</font>
						<span title="{{b.fieldName || ''}}">{{b.fieldName || ''}}</span>
						<span title="{{b.fieldEnName || ''}}">
							{{b.fieldEnName || '一'}}
							{{# if(b.fieldLength) { }}
								({{b.fieldLength}})
							{{# } }}
						</span>
						<span>{{# if(b.fieldDataType=='1') { }} 文本 {{# } else if(b.fieldDataType == '2') { }} 数字 {{#} else { }}时间{{#}}}</span>
					</li>
					{{# }); }}
				</ul>
			</div>
			{{# }); }}
		</script>

		<!--关联页面模板-->
		<script id="contentPageTpl" type="text/template">
			<div>
				<p>
					<img th:src="@{/img/document.png}"/>
					<span>接口局部页面(<span id="interfacePartNum">{{d.interfaceFileList.length}}</span>)</span>
				</p>
				<ul class="list-group" id="interfacePartUl">
					{{# layui.each(d.interfaceFileList, function(indexB, b){ }}
					<li class="list-group-item"><img class = "partPage" src="{{b.filePath}}" th:onerror="this.src='/img/default-img.png'"/><p style="text-align: center">{{b.fileName}}</p></li>
					{{# }); }}
				</ul>
			</div>
			<div>
				<p>
					<img th:src="@{/img/document.png}" style = "margin-top:-3px;"/>
					<span>关联结构页面({{d.pageFileList.length}})</span>
				</p>
				<ul class="list-group">
					{{# layui.each(d.pageFileList, function(indexB, b){ }}
					<li class="list-group-item"><img class = "partPage" src="{{b.filePath}}" th:onerror="this.src='/img/default-img.png'"/><p style="text-align: center"><a data-id="{{b.id}}" class="pageImgName">{{b.fileName}}</a></p></li>
					{{# }); }}
				</ul>
			</div>
		</script>

		<!--关联用况模板-->
		<script id="contentUsageTpl" type="text/template">
			<ul class="list-group">
				{{# layui.each(d, function(index, a){ }}
				<li class="list-group-item">
					<div class="list-tit">
						<p>
							<span>{{# if(a.fbType=='1') { }} 前台 {{#} else { }}后台{{#}}}</span>
							<span>{{# if(a.usageType=='1') { }} 增 {{# } else if(a.usageType == '2') { }} 删 {{# } else if(a.usageType == '3') { }} 改 {{#} else { }}查{{#}}}</span>
							<span>{{a.usageyName || ''}}</span>
							<span style="color: #0088FF;float: right;margin-right: 12px;"><a class = "usage-detail" usageId = "{{a.id}}">查看详情</a></span>
						</p>
						<p>
							<span>用况架构</span>
							<span>
							{{# if(a.clientType=='1') { }} PCweb {{# } else if(a.clientType == '2') { }} H5 {{# } else if(a.clientType == '3') { }} APP {{#} else { }} 微信小程序 {{#}}}
							· {{# if(a.isAlone=='1') { }} 单模块 {{#} else { }} 非单模块 {{# }}}
							· {{# if(a.versionType=='1') { }} 新功能 {{# } else if(a.versionType == '2') { }} 优化 {{#} else { }} 废弃 {{#}}}
						</span>
						</p>
					</div>
					<div class="list-content">
						<p>用况故事</p>
						<p>{{a.usageStory || '无'}}</p>
					</div>
					<div class="list-content">
						<p>价值描述</p>
						<p>{{a.valueDescription || '无'}}</p>
					</div>
					<div class="list-content">
						<p>业务实现逻辑</p>
						<p>{{a.businessImplDescription || '无'}}</p>
					</div>
					<div class="list-content">
						<p>优化或废弃说明</p>
						<p>{{a.versionDescription || '无'}}</p>
					</div>
				</li>
				{{# }); }}
			</ul>
		</script>

		<script id="virtualUsageTpl" type="text/template">
			<div id="listInterface" class="listInterface">
				{{# layui.each(d.list, function(index, a){ }}
				<div class="list-item mb-12" data-id="{{a.id}}" title="{{a.description}}">
					<span class="col-md-4" title="{{a.slaveInterfaceName}}" onclick="virtualUsageDetail({{a.id}})"><img th:src="@{/img/Icon-yidongshu.png}" class="icon" />{{index + 1}}.{{a.slaveInterfaceName}}</span>
					<span class="col-md-3">{{a.dubboUrl}}</span>
					<span class="col-md-2">
						<a class="{{# if(a.model || a.selfModel || a.isAllowEmpty) { }} red {{# } }}" onclick="virtualUsageModelSelect({{a.id}})">模式选择</a>
					</span>
					<span class="col-md-2">
						{{# if(a.isMaster=='Y') { }}
						主
						{{# } else if(a.isMaster=='N') { }}
						从
						{{# } }}
					</span>
					<span class="pull-right" data-id="{{a.id}}"><img th:src="@{/img/Icon-jianshao.png}" class="icon-jian" /></span>
				</div>
				{{# }); }}
			</div>
			<div class="color-blue btn-add">
				<span class="addDubboBtn"><img th:src="@{/img/Icon-add.png}" class="icon" style="padding-right: 4px;" />选择DUBBO接口</span>
<!--				&nbsp;&nbsp;-->
<!--				<span class="addMethodBtn"><img th:src="@{/img/Icon-add.png}" class="icon" style="padding-right: 4px;" />选择METHOD</span>-->
				{{# if(d.isBranch == 'Y') { }}
				&nbsp;&nbsp;
				<span class="branch">编辑流程分支</span>
				{{# } }}
			</div>
		</script>
		<script id="virtualUsageGroupTpl" type="text/template">
			<div class="virtualUsageGroup">
				{{# layui.each(d.list, function(index, a){ }}
				<div class="list-item mb-12" data-id="{{a.id}}" title="{{a.groupDescription}}">
					<span class="col-md-6" title="{{a.groupName}}" onclick="virtualUsageGroupDetail({{a.id}})"><img th:src="@{/img/Icon-yidongshu.png}" class="icon" />{{index + 1}}.{{a.groupName}}</span>
					<span class="col-md-2">
						<a class="{{# if(a.model || a.selfModel) { }} red {{# } }}" onclick="virtualUsageGroupModelSelect({{a.id}})">模式选择</a>
					</span>
					<span class="col-md-2">
						{{# if(a.isMaster=='Y') { }}
						主
						{{# } else if(a.isMaster=='N') { }}
						从
						{{# } }}
					</span>
					<span class="pull-right" data-id="{{a.id}}"><img th:src="@{/img/Icon-jianshao.png}" class="icon-jian" /></span>
				</div>
				{{# }); }}
			</div>
			<div class="color-blue btn-add">
				<span class="addGroupBtn"><img th:src="@{/img/Icon-add.png}" class="icon" style="padding-right: 4px;" />添加组</span>
			</div>

		</script>
	</body>
</html>
